/* api列表页 */
/* 头部样式 */
header .nav li a{
    color:#666666;
}
header .nav li.active a{
    border-bottom:2px solid #00bdff;
    color:#00bdff;
}

header .right-box a{
    color:#666666;
}

/* api分类 */
.api-category ul li{
    padding:5px 15px;
    float:left;
    border-radius: 10px;
    color:#666666;
    border:1px solid #666666;
    margin-right: 10px;
    margin-bottom: 10px;

    cursor: pointer;
}
.api-category ul li.active{
    border:1px solid #00bdff;
    color:#00bdff;
}

/* 搜索框 */
.api-search{
    line-height: 30px;
}
.api-search form{
    width: 230px;
    height: 30px;
    background-color: #f4f4f4;
    border-radius: 15px;
}

.api-search form input{
    width: 200px;
    height: 30px;
    border:none;
    background-color: transparent;
}
.api-search form .btn{
    background: url(../imgs/magnifier.png) no-repeat 0 6px;
    width: 26px;
}

/* api列表内容 */
.api-content li{
    width: 224px;
    height: 270px;
    border:1px solid #eeeeee;
    overflow: hidden;
    float:left;
    margin-right: 15px;
    margin-bottom: 15px;
    box-sizing: border-box;
}
.api-content li .tips{
    position: absolute;
    left:10px;
    top:10px;
    background-color: #e5f8ff;
    color:#00bdff;
    padding:4px;
    font-size: 12px;

    display: none;
}

/* 显示提示效果 */
.api-content li .on{
    display: block;
}

.api-content li div{
    transition: all 0.3s linear;
}
.api-content li .link{
    display: inline-block;
    width: 190px;
    height: 32px;
    line-height: 32px;
    background-color: #00bdff;
    color:#fff;

    position: absolute;
    left:15px;
    bottom:-50px;

    /* CSS3新属性 */
    transition: all 0.3s linear;
}
/* css交互效果 */
.api-content li:hover .link{
    bottom: 15px;
}

.api-content li:hover div{
    margin-top: 35px;
}